﻿<div class="messageBox" tabindex="-1" style="height: 500px;">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" data-bind="click: close" aria-hidden="true">&times;</button>
        <h4 class="modal-title">
            My Likes
        </h4>
    </div>
    <div class="modal-body">
        <p class="lead">These are the songs you've liked. Click one to play.<br /><small>Chavah will play these songs, and others like them, more often for you.</small></p>
        <div class="list-group" data-bind="foreach: results" style="max-height: 200px; overflow-y: auto;">
            <a class="list-group-item" href="#" data-bind="click: $root.selectSongAndClose.bind($root, $data)">
                <div class="row">
                    <div class="col-md-2">
                        <img data-bind="attr: { src: albumArtUri }" style="max-width: 60px; max-height: 60px;" />
                    </div>
                    <div class="col-md-10">

                        <span data-bind="text: name"></span>
                        <br />
                        <span class="text-muted">by</span>
                        <span data-bind="text: artist"></span>
                        <br />
                        <span class="text-muted">on</span>
                        <span data-bind="text: album"></span>
                    </div>
                </div>
            </a>
        </div>
        <p data-bind="visible: hasZeroResults">
            Hmmm. Looks like you don't have any liked songs yet.
        </p>
        <ul class="pagination" data-bind="visible: pagesCount() > 1">
            <li data-bind="css: { disabled: $root.isOnFirstPage }, click: previousPage"><a href="#">&laquo;</a></li>
            <!-- ko foreach: resultPages -->
            <li data-bind="css: { active: $root.currentResultsPage() === $index() }"><a href="#" data-bind="text: $index(), click: $root.goToPage.bind($root, $index())"></a></li>
            <!-- /ko -->
            <li data-bind="css: { disabled: $root.isOnLastPage }, click: nextPage"><a href="#">&raquo;</a></li>
        </ul>
    </div>
</div>